<template>
  <div class="app-container">
    <div class="YT_MAIN H100 ivu-layout orderConetent">
      <div class="fullCalendarContent">
        <FullCalendar id="calendar" ref="myfullCalendar" class="demo-app-calendar" :options="calendarOptions">
          <template v-slot:eventContent="arg">
            <el-popover placement="top-start" title="标题" width="200" :visible-arrow="false" trigger="hover">
              <i class="title">{{ arg.event.title }}</i>
              <div slot="reference" class="popper-content">
                <span>{{ arg.timeText }}</span>
                <i>{{ arg.event.title }}</i>
              </div>
            </el-popover>
          </template>
        </FullCalendar>
      </div>

    </div>
  </div>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  import {
    getAllOrderStatusApi,
    getOrder
  } from "@/api/order/index";
  export default {
    name: 'OrderIndex',
    components: {
      FullCalendar
    },
    data() {
      return {
        editModal: false,
        loading: false,
        driver: null,
        orderStateList: [],
        datalist: [],
        nowdatalist: [],
        title: '',
        calendarOptions: {
          locale: 'zh',
          plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
          initialView: 'dayGridMonth',
          firstDay: 1,
          headerToolbar: {
            left: '',
            center: 'prev title next',
            right: ''
          },
          buttonText: {
            prev: '<',
            next: '>',
            today: '今天',
          },
          eventTimeFormat: { // like '14:30:00'
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false, // 设置时间为24小时
          },
          slotLabelFormat: { // 左侧时间格式
            hour: '2-digit',
            minute: '2-digit',
            meridiem: 'lowercase',
            hour12: false, // false设置时间为24小时
          },
          events: [{
              id: 1,
              title: 'event 1',
              start: '2024-01-01',
              color: 'purple',
            }
          ],
          eventColor: '#378006', // 事件的颜色
          allDayText: '全天',
          droppable: true, // this allows things to be dropped onto the calendar
        },
        monthEvent: [{
            id: 'number_1',
            resourceId: 'number_1',
            title: 'event 1',
            start: '2024-01-11',
            color: 'purple',
          },
          {
            resourceId: 'number_2',
            id: 'number_2',
            title: 'event 2',
            start: '2024-01-12',
            color: 'purple',
          },
          {
            title: 'event 3',
            start: '2024-01-13'
          },
          {
            title: 'event 4',
            start: '2024-01-14'
          },
          {
            title: 'event 5',
            start: '2024-01-11'
          },
          {
            title: 'event 6',
            start: '2024-01-11',
            color: 'purple'
          },
          {
            title: 'event 7',
            start: '2024-01-11'
          },
          {
            id: 4,
            title: 'event 7',
            start: '2024-01-12',
            extendedProps: {
              description: '444444444444',
            },
          },
        ],
        weekEvent: [{
          id: 'number_1',
          resourceId: 'number_1',
          title: 'week_event',
          start: '2024-01-11',
          color: 'purple',
        }, ]
      }
    },
    mounted() {
      if (sessionStorage.getItem('rowData')) {
        this.editModal = true
      }
      this.getAllStatus()
      this.calendarApi = this.$refs.myfullCalendar.getApi();
      this.title = this.calendarApi.view?.title;
      // 模拟动态获取数据
      this.getDtata();
    },
    watch: {
      // 切换视图显示不同的事件
      'calendarApi.view.type'() {
        this.getDtata()
      }
    },
    methods: {
      getDtata() {
        setTimeout(() => {
          this.calendarOptions.events = this.calendarApi.view?.type === 'dayGridMonth' ? this.monthEvent : this
            .weekEvent
        }, 200);
      },
      prev() {
        this.calendarApi.prev();
        this.title = this.calendarApi.view?.title;
      },
      next() {
        this.calendarApi.next();
        this.title = this.calendarApi.view?.title;
      },
      today() {
        this.calendarApi.today();
        this.title = this.calendarApi.view?.title;
      },
      month() {
        this.calendarApi.changeView('dayGridMonth');
        this.calendarApi.today();
        this.title = this.calendarApi.view?.title;
      },
      week() {
        this.calendarApi.changeView('timeGridWeek');
        this.calendarApi.today();
        this.title = this.calendarApi.view?.title;
      },
      day() {
        this.calendarApi.today();
        this.title = this.calendarApi.view?.title;
      },
      search() {
        this.calendarApi.changeView('dayGrid', {
          start: '2021-10-21',
          end: '2021-10-23',
        });
      },
      setTabPaneLabel(label) {
        return (h) => {

        }
      },
      /**
       * 查询列表
       */
      queryData(param) {
        this.loading = true;
        getOrder(param)
          .then((res) => {
            console.log('获取订单列表', res);
            this.loading = false;
            if (res.rstpCode === '0000') {
              this.datalist = res.data;
              this.nowdatalist = res.data;
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
      },
      // 获取所有状态
      getAllStatus() {
        getAllOrderStatusApi()
          .then((res) => {
            console.log('获取所有订单状态', res);
            if (res.rstpCode === '0000') {
              this.orderStateList = res.data;
              this.queryData()
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
      },
      handleTabClick(tab) {
        console.log(tab.index);
        let sta_id = tab.index == '0' ? '' : tab.index
        this.loading = true;
        getOrder({
          state_id: sta_id
        }).then((res) => {
          this.loading = false;
          console.log('获取订单列表', res);
          if (res.rstpCode === '0000') {
            this.nowdatalist = res.data;
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .app-container-page {
    padding-top: 20px;
  }

  .YT_MAIN {
    min-height: 10px;
    background-color: hsla(0, 0%, 100%, 0) !important;
    border-radius: 2px 2px 0 0
  }

  .H100 {
    height: 100%
  }

  .YT_TABS {
    padding: 0 15px
  }

  .orderConetent {
    padding: 20px 0;
  }
  .fullCalendarContent {
    padding: 20px;
    height: 100%;
  }
</style>
